<template>
  <view>
    <view class="navigation">
      <view class="navigation_back">
        <uni-icons
          type="back"
          size="24"
          color="#333"
          style="z-index: 1"
          @tap="backref()"
        ></uni-icons>
        <view class="navigation_title"> 订单详情 </view>
      </view>
    </view>
    <view class="detail_con">
      <view class="order_detail_type">
        <view class="order_status">
          {{
            orderStatus == 1
              ? "待接单"
              : orderStatus == 2
              ? "准备中"
              : orderStatus == 3
              ? "待取货"
              : orderStatus == 4
              ? "配送中"
              : "已取餐"
          }}
        </view>
        <!-- <view class="order_time">
					{{orderStatus == 1?'请在00:15:00内进行支付，超时将取消':orderStatus == 2?'该订单已成功支付且发货，请收货':orderStatus==3?'该订单已完成，请您帮忙评价一下吧':orderStatus==4?'该订单已完成，再来下一个订单':'该订单已完成，请您帮忙评价一下吧'}}
				</view> -->
      </view>
      <view class="detail_goods">
        <view class="checkout_con_bd">
          <!-- <view class="checkout_store_hd">
						<view class="checkout_store_name">
							{{goodDetail.storeName}}
						</view>
						<view class="checkout_store_phone">
							<image src="../../static/image/shop/mobile.svg" mode=""></image>
						</view>
					</view> -->
          <view class="checkout_goods">
            <view
              class="checkout_good"
              v-for="(item, index) in orderList"
              :key="index"
            >
              <view class="checkout_good_img">
                <image :src="domain + item.goodsImg" mode="aspectFill"></image>
              </view>
              <view class="checkout_good_info">
                <view class="checkout_good_name">
                  {{ item.goodsName }}
                </view>
                <!-- <view class="checkout_good_type">
									{{item.type}}
								</view> -->
                <view class="checkout_good_other">
                  <view class="checkout_good_price"> ¥{{ item.price }} </view>
                  <view class="checkout_good_num"> x{{ item.number }} </view>
                </view>
              </view>
            </view>
          </view>

          <view class="checkout_money">
            <view class="checkout_lunchbox">
              <view class="checkout_money_label"> 餐盒费 </view>
              <view class="checkout_money_price">
                ¥{{ orderDetail.packAmount || 0 }}
              </view>
            </view>
            <view class="checkout_delivery">
              <view class="checkout_money_label"> 配送费 </view>
              <view class="checkout_money_price">
                ¥{{ orderDetail.deliveryAmount || 0 }}
              </view>
            </view>
            <view class="checkout_delivery">
              <view class="checkout_money_label"> 服务费 </view>
              <view class="checkout_money_price">
                ¥{{ orderDetail.serviceAmount || 0 }}
              </view>
            </view>
            <view class="checkout_delivery">
              <view class="checkout_money_label"> 减免费用 </view>
              <view class="checkout_money_price">
                ¥{{ orderDetail.reductionAmount || 0 }}
              </view>
            </view>
          </view>
          <view class="checkout_total_price">
            <text>¥{{ orderDetail.amount }}</text>
          </view>
        </view>
      </view>
      <view class="order_btns">
        <view class="button" v-if="orderStatus == 1" @tap="takeOrder()">
          接单
        </view>
        <view class="button" v-if="orderStatus == 2" @tap="sendOrder()">
          出餐
        </view>
      </view>
      <view class="detail_shipping">
        <view class="detail_shipping_title"> 服务信息 </view>
        <view class="detail_shipping_list">
          <view class="shipping_item" v-if="orderDetail.business">
            <view class="shipping_label"> 联系商家 </view>
            <view class="shipping_value">
              {{ orderDetail.business.userPhone }}
              <view
                class="button"
                @tap="toPhone(orderDetail.business.userPhone)"
                >拨打</view
              >
            </view>
          </view>
          <view class="shipping_item" v-if="orderDetail.riderTwo">
            <view class="shipping_label"> 联系校外骑手 </view>
            <view class="shipping_value">
              {{ orderDetail.riderTwo.userPhone }}
              <view
                class="button"
                @tap="toPhone(orderDetail.riderTwo.userPhone)"
                >拨打</view
              >
            </view>
          </view>
          <view class="shipping_item" v-if="orderDetail.riderOne">
            <view class="shipping_label"> 联系校内骑手 </view>
            <view class="shipping_value">
              {{ orderDetail.riderOne.userPhone }}
              <view
                class="button"
                @tap="toPhone(orderDetail.riderOne.userPhone)"
                >拨打</view
              >
            </view>
          </view>
          <view class="shipping_item">
            <view class="shipping_label"> 平台售后 </view>
            <view class="shipping_value">
              {{ servicePhone }}
              <view class="button" @tap="toPhone(servicePhone)">拨打</view>
            </view>
          </view>
        </view>
      </view>

      <view class="detail_order">
        <view class="detail_order_title"> 配送信息 </view>
        <view class="message_list">
          <view class="message_item">
            <view class="message_label"> 用户 </view>
            <view class="message_value">
              {{ orderDetail.address.userName }}
            </view>
          </view>
          <view class="message_item">
            <view class="message_label"> 电话 </view>
            <view class="message_value">
              {{ orderDetail.address.userPhone }}
              <view class="button" @tap="toPhone(orderDetail.address.userPhone)"
                >拨打</view
              >
            </view>
          </view>
          <view class="message_item">
            <view class="message_label"> 地址 </view>
            <view class="message_value">
              {{ orderDetail.address.userAddress }}
            </view>
          </view>
          <view class="message_item">
            <view class="message_label"> 订单编号 </view>
            <view class="message_value">
              {{ orderDetail.orderNumber }}
            </view>
          </view>
          <view class="message_item">
            <view class="message_label"> 下单时间 </view>
            <view class="message_value">
              {{ orderDetail.createTime }}
            </view>
          </view>
          <view class="message_item">
            <view class="message_label"> 备注信息 </view>
            <view class="message_value">
              {{ orderDetail.remark }}
            </view>
          </view>
          <!-- <view class="message_item">
						<view class="message_label">
							餐具
						</view>
						<view class="message_value">
							1份
						</view>
					</view> -->
        </view>
      </view>
      <view class="detail_order">
        <view class="detail_order_title"> 进程 </view>
        <uni-steps
          :options="steps"
          direction="column"
          :active="active"
        ></uni-steps>
      </view>
    </view>
  </view>
</template>

<script>
import server_url from "../../api/config.js";
import {
  getOrderDetail,
  takeStoreOrder,
  sendStoreOrder,
  getOrderStatus,
} from "../../api/api.js";
export default {
  data() {
    return {
      steps: [],
      active: 0,
      domain: server_url,
      orderStatus: 1,
      orderDetail: {
        amount: 0,
        createTime: "",
        foodAmount: 0,
        orderNumber: "",
        packAmount: 0,
        payStatus: 0,
        reductionAmount: 0,
        remark: "",
        riderAmount: 0,
        serviceAmount: 0,
        status: 0,
        updateTime: "",
      },
      orderList: [],
      servicePhone: "",
    };
  },
  methods: {
    toPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone, //要拨打的手机号
        success: (res) => {
          // console.log("调用成功")
        },
        fail: (res) => {
          // console.log('调用失败!')
        },
      });
    },
    takeOrder() {
      takeStoreOrder({
        orderId: this.id,
      }).then((res) => {
        uni.showToast({
          title: "操作成功",
          icon: "none",
          duration: 2000,
        });
        this.backref();
      });
    },
    sendOrder() {
      sendStoreOrder({
        orderId: this.id,
      }).then((res) => {
        uni.showToast({
          title: "操作成功",
          icon: "none",
          duration: 2000,
        });
        this.backref();
      });
    },
    backref() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getDetail() {
      getOrderDetail({
        orderNumber: this.orderId,
      }).then((res) => {
        this.orderDetail = res.data.order;
        this.orderList = res.data.orderList;
        this.servicePhone = res.data.servicePhone;
      });
    },
    getStatus() {
      getOrderStatus({
        orderId: this.id,
      }).then((res) => {
        this.steps = [];
        if (res.data && res.data.length) {
          res.data.forEach((dd) => {
            let obj = {
              title: dd.content,
              desc: dd.timestamp,
            };
            this.steps.unshift(obj);
          });
          this.active = this.steps.length;
          console.log(this.steps);
        }
      });
    },
  },
  onLoad(e) {
    this.orderId = e.id;
    this.orderStatus = e.status;
    this.id = e.idd;
    this.getDetail();
    this.getStatus();
  },
};
</script>

<style lang="scss">
.order_btns {
  padding: 0 24rpx 40rpx;
  display: flex;
  margin-top: 26rpx;
  justify-content: flex-end;

  .order_cancel {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24rpx;
    border: 1rpx solid #d8d8d8;
    border-radius: 8rpx;
    color: #2e343a;
    font-size: 26rpx;
  }

  .order_pay {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 24rpx;
    background-color: #2588ff;
    border-radius: 8rpx;
    color: #ffffff;
    font-size: 26rpx;
  }

  .order_again {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 24rpx;
    background-color: #2588ff;
    border-radius: 8rpx;
    color: #ffffff;
    font-size: 26rpx;
  }

  .order_again2 {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24rpx;
    border: 1rpx solid #d8d8d8;
    border-radius: 8rpx;
    color: #2e343a;
    font-size: 26rpx;
  }
}

.button {
  width: 168rpx;
  height: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 24rpx;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );
  border-radius: 8rpx;
  color: #ffffff;
  font-size: 26rpx;
}

page {
  background: #f9fbfc;
}

.navigation {
  width: 100%;
  height: 150rpx;
  padding: 60rpx 24rpx 0;
  text-align: center;
  position: relative;

  .navigation_back {
    position: absolute;
    top: 60rpx;
    display: flex;
    justify-content: space-between;
    flex: 1;
    width: 100%;
  }

  .navigation_title {
    color: #333;
    font-size: 36rpx;
    font-weight: 500;
    flex: 1;
    margin-left: -125rpx;
  }
}

.detail_con {
  padding: 0 24rpx 40rpx;

  .order_detail_type {
    padding: 28rpx 0;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;

    .order_status {
      font-size: 32rpx;
      color: #2e343a;
      font-weight: 500;
    }

    .order_time {
      color: #2e343a;
      font-size: 28rpx;
      margin-top: 20rpx;
      font-weight: 500;
    }
  }

  .detail_goods {
    padding: 0 24rpx;
    background-color: #fff;
    margin-top: 24rpx;
    border-radius: 12rpx;

    .checkout_con_bd {
      padding: 32rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-top: 20rpx;

      .checkout_store_hd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 32rpx;
        border-bottom: 1rpx solid #e8e7e7;

        .checkout_store_name {
          font-size: 30rpx;
          color: #2e343a;
          font-weight: 700;
        }

        .checkout_store_phone {
          image {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }

      .checkout_goods {
        border-bottom: 1rpx solid #e8e7e7;

        .checkout_good {
          position: relative;
          padding: 24rpx 0;
          display: flex;

          .checkout_good_img {
            image {
              width: 120rpx;
              height: 120rpx;
              border-radius: 12rpx;
            }
          }

          .checkout_good_info {
            padding-top: 15rpx;
            margin-left: 24rpx;

            .checkout_good_name {
              font-size: 28rpx;
              color: #2e343a;
              font-weight: 500;
            }

            .checkout_good_type {
              font-size: 24rpx;
              color: #9098a0;
              margin-top: 8rpx;
            }

            .checkout_good_other {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              display: flex;
              flex-direction: column;
              align-items: flex-end;

              .checkout_good_price {
                font-size: 32rpx;
                color: #333333;
                font-weight: 500;
              }

              .checkout_good_num {
                font-size: 24rpx;
                color: #9098a0;
              }
            }
          }
        }
      }

      .checkout_money {
        border-bottom: 1rpx solid #e8e7e7;

        .checkout_lunchbox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;
        }

        .checkout_delivery {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 20rpx;
        }

        .checkout_money_label {
          font-size: 28rpx;
          color: #9098a0;
          font-weight: 500;
        }

        .checkout_money_price {
          font-size: 28rpx;
          color: #333333;
        }
      }

      .checkout_total_price {
        padding-top: 32rpx;
        text-align: right;
        font-size: 24rpx;
        color: #2e343a;

        text {
          font-size: 32rpx;
          color: rgba(255, 141, 26, 1);
          font-weight: 500;
        }
      }
    }
  }

  .detail_shipping {
    padding: 0 24rpx;
    background-color: #fff;
    margin-top: 32rpx;
    border-radius: 12rpx;

    .detail_shipping_title {
      font-size: 32rpx;
      color: #2e343a;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .detail_shipping_list {
      padding: 16rpx 0;

      .shipping_item {
        padding: 16rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .shipping_label {
          font-size: 28rpx;
          color: #2e343a;
        }

        .shipping_value {
          font-size: 28rpx;
          color: #9098a0;
          width: 70%;
          text-align: right;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }

  .detail_order {
    padding: 0 24rpx;
    background-color: #fff;
    margin-top: 32rpx;
    border-radius: 12rpx;

    .detail_order_title {
      font-size: 32rpx;
      color: #2e343a;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .message_list {
      padding: 16rpx 0;

      .message_item {
        padding: 16rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .message_label {
          font-size: 28rpx;
          color: #2e343a;
        }

        .message_value {
          font-size: 28rpx;
          color: #9098a0;
          width: 50%;
          text-align: right;
        }
      }
    }
  }
}
</style>
